<template>
  <div class="background">
    <div class="login-box">
      <div class="carousel-box">
        <div class="carousel">
          <el-carousel arrow="never" indicator-position="none">
            <el-carousel-item v-for="item in imgwrap" :key="item.url">
              <img :src="item.url">
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="login-input">
        <h1>
          <i class="el-icon-setting" />
        </h1>
        <h1>欢迎登录 !</h1>
        <h3>高校毕业生就业平台，致力于提高所有高校的毕业生的就业率</h3>
        <form action="">
          <div class="username-box">
            <input
              v-model="loginForm.username"
              :class="usernameInputClass"
              type="text"
              @focus="usernameAnimation"
              @blur="usernameAnimation"
            >
            <span :class="usernameClass">用户名</span>
            <span :class="usernameLabelClass">
              <label class="iconfont">&#xe746;</label>
            </span>
          </div>
          <div class="password-box">
            <input
              v-model="loginForm.password"
              :class="passwordInputClass"
              type="password"
              @focus="passwordAnimation"
              @blur="passwordAnimation"
            >
            <span :class="passwordClass">密码</span>
            <span :class="passwordLabelClass">
              <label class="iconfont">&#xe775;</label>
            </span>
          </div>
        </form>
        <div class="login-options">
          <div class="rememberMe">
            <input class="rememberMeCheck" type="checkbox">
            <div>记住我</div>
          </div>
          <div>
            <a href="" class="forgertPassword">
              忘记密码
            </a>
          </div>
        </div>
        <!-- <button class="login-button">登录</button> -->
        <router-link to="/home"><button class="login-button" @click="onSubmit">登录</button></router-link>

      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user'
// import { mixpanelTracker } from '@/utils/'
import { setToken } from '@/utils/auth'
// const bcrypt = require('bcryptjs')
import md5 from 'js-md5'
const a_username = {
  before: 'placeholder-before',
  after: 'placeholder-after'
}
const a_password = {
  before: 'placeholder-before',
  after: 'placeholder-after'
}
const a_input = {
  before: 'input-before',
  after: 'input-after'
}
const a_label = {
  before: 'label-before',
  after: 'label-after'
}
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        type: 0
      },
      loading: false,
      usernameClass: a_username.before,
      passwordClass: a_password.before,
      usernameInputClass: a_input.before,
      passwordInputClass: a_input.before,
      usernameLabelClass: a_label.before,
      passwordLabelClass: a_label.before,
      // imgwrap: [
      //   { url: require('@/assets/loginPic/gif0.gif') },
      //   { url: require('@/assets/loginPic/gif1.gif') },
      //   { url: require('@/assets/loginPic/gif2.gif') }
      // ]
      imgwrap: [
        { url: require('@/assets/loginPic/1.png') },
        { url: require('@/assets/loginPic/2.png') },
        { url: require('@/assets/loginPic/3.png') }
      ]
    }
  },
  methods: {
    usernameAnimation(v) {
      if (v.type === 'focus') {
        this.usernameClass = a_username.after
        this.usernameInputClass = a_input.after
        this.usernameLabelClass = a_label.after
      } else {
        if (!this.loginForm.username) {
          this.usernameClass = a_username.before
          this.usernameInputClass = a_input.before
          this.usernameLabelClass = a_label.before
        }
      }
    },
    passwordAnimation(v) {
      if (v.type === 'focus') {
        this.passwordClass = a_password.after
        this.passwordInputClass = a_input.after
        this.passwordLabelClass = a_label.after
      } else {
        if (!this.loginForm.password) {
          this.passwordClass = a_password.before
          this.passwordInputClass = a_input.before
          this.passwordLabelClass = a_label.before
        }
      }
    },
    async onSubmit() {
      this.loading = true
      try {
        const form = { ...this.loginForm }
        form.password = md5(form.password)
        // form.password = bcrypt.hashSync(form.password, 10)
        console.log('111111')
        const { data } = await login(form)
        console.log(data, '222222')
        setToken(data.token)
        delete data.token
        window.localStorage.setItem('userInfo', JSON.stringify(data))
        // this.$router.push({ path: '/', query: this.otherQuery })
        this.$router.push({ path: '/home' })
        console.log(this.$router)
        this.loading = false
        // mixpanelTracker('portal.login.success', {
        //   desc: '登录页-登录成功',
        //   data: this.loginForm
        // })
      } catch (err) {
        this.loading = false
      }

      //   await login(this.form).then(res => {
      //     this.loading = true
      //     setToken(res.data.token)
      //     this.$store.dispatch('user/login', this.form).then(() => {
      //       this.$router.push({ path: '/', query: this.otherQuery })
      //       this.loading = false
      //       mixpanelTracker('portal.login.success', {
      //         desc: '登录页-登录成功',
      //         data: this.loginForm
      //       })
      //     })
      //       .catch(() => {
      //         this.loading = false
      //       })
      //   })
    }
  }

}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 3366926 */
  src: url('');
  src: url('?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_3366926_mtt5e0nfs2.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_3366926_mtt5e0nfs2.woff') format('woff'),
  url('//at.alicdn.com/t/font_3366926_mtt5e0nfs2.ttf') format('truetype'),
  url('#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

* {
  margin: 0;
  padding: 0;
}

.background {
  display: flex;
  justify-content: center;
  height: 100%;
  background: #eff1f8;
}

.login-box {
  display: flex;
  width: 800px;
  height: 500px;
  position: relative;
  top: 20%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: rgba(187, 187, 187, 0.466) 10px 10px 20px;
  background-color: #3154c2;
  font-size: 16px;
}

.carousel-box {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 101%;
  background-color: transparent;
  .carousel {
    width: 400px;
    margin-top: 100px;
    img {
      margin-left: 60px;
      width: 290px;
    }
  }
}

.login-input {
  display: flex;
  align-items: center; /* 垂直居中 */
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  width: 400px;
  height: 101%;
  background-color: #ffffff;
  div {
    position: relative;
  }
  h1 {
    i {
      font-size: 80px;
      color: #4b7ef3;
      margin-bottom: 20px;
    }
    font-size: 36px;
    color: #101010;
    text-align: center;
  }
  h3 {
    padding:0 20px;
    margin-top: 10px;
    color: #c6c3d0;
    text-align: center;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 20px;
  }
  .input-before {
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 2em;
    width: 260px;
    height: 40px;
    border: #dadada 2px solid;
    background-color: #f9fafe;
    border-radius: 8px;
    margin-top: 20px;
    outline: none;
    overflow: scroll;
    font-size: 16px;
  }
  .input-after {
    box-sizing: border-box;
    padding-left: 1em;
    padding-right: 2em;
    width: 260px;
    height: 40px;
    border-radius: 8px;
    margin-top: 20px;
    outline: none;
    overflow: scroll;
    font-size: 16px;
    border: #285ac4 2px solid;
    background-color: #fff;
  }
  .label-before {
    position: absolute;
    top:28px;
    right: 12px;
    font-size: 20px;
    color: #888888;

  }
  .label-after {
    position: absolute;
    top:28px;
    right: 12px;
    font-size: 20px;
    color: #285ac4;
  }
  .placeholder-before {
    position: absolute;
    display: block;
    top:30px;
    left: 16px;
    font-size: 16px;
    color: #595959;
    transition: all .2s ease-in-out;
  }
  .placeholder-after {
    position: absolute;
    display: block;
    top:14px;
    left: 16px;
    font-size: 12px;
    color: #285ac4;
    background-color: #ffffff;
    transition: all .2s ease-in-out;
  }
  .placeholder-before {
    position: absolute;
    display: block;
    top:30px;
    left: 16px;
    font-size: 16px;
    color: #888888;
    transition: all .2s ease-in-out;
  }
  .placeholder-after {
    position: absolute;
    display: block;
    top:14px;
    left: 16px;
    font-size: 12px;
    color: #285ac4;
    background-color: #ffffff;
    transition: all .2s ease-in-out;
  }
  .login-button {
    width: 260px;
    height: 40px;
    margin-top: 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    border: none;
    background-color: #3154c2;
  }
  .login-options {
    margin-top: 10px;
    width: 250px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    .rememberMe {
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #888888;
  }
  }
  .forgertPassword {
    color: #3154c2;
  }
  .rememberMeCheck:checked+div {
    color: #3154c2;
  }
}
</style>
